<template>
    <el-dialog title="选择跳转文章"  :visible.sync="dataVisible" :modal="true" width="50%" append-to-body @close="onClose">
        <el-row v-loading = "loading" >
            <el-result v-if="!loading&&publishList.length==0" icon="info" title="暂无文章" subTitle="请先添加文章">
                <template slot="extra">
                    <el-button type="primary" size="medium"  @click="dataVisible=false">返回</el-button>
                </template>
                </el-result>
            <el-col v-else :span="6" v-for="(o, index) in publishList" style="margin-top: 10px;width: 20%;margin-left:0%" :key="o" :offset="index > 0 ? 2 : 0" @click.native="choose(publishList[index])">
                <el-card shadow="hover" style="width:180px;height: 120px;margin-left: 0%;" :body-style="{ padding: '0px' }" >
                <div style="margin-top: 10px;margin-left: 10px;margin-right: 10px;">
                    <span>标题：{{publishList[index].title}}</span>
                    <div class="bottom clearfix">
                        <span>摘要：{{publishList[index].digest}}</span>
                        {{publishList[index].imgUrl}}
                    </div>
                </div>
                </el-card>
            </el-col>

            <!-- <el-col v-else :span="6" v-for="(o, index) in publishList" style="margin-top: 10px;width: 50%;margin-left:0%" :key="i" :offset="index > 0 ? 2 : 0" @click.native="choose(publishList[index])">
                <el-card shadow="hover" style="width:440px;height: 80px;margin-left: 0%;" :body-style="{ padding: '0px' }" >
                <div style="margin-top: 10px;margin-left: 10px;margin-right: 10px;">
                    <span>标题：{{publishList[index].title}}</span>
                    <div class="bottom clearfix">
                        <span>摘要：{{publishList[index].digest}}</span>
                        {{publishList[index].imgUrl}}
                    </div>
                </div>
                </el-card>
            </el-col> -->
        </el-row>
        <div style="margin-top: 10px;margin-left: 30px;">
            <el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10]" :page-size="10" :total="totalCount" layout="total, prev,pager, next, jumper">
            </el-pagination>
        </div>
    </el-dialog>
</template>
<script>
export default {
    name:"assets-selector",
    data:function (){
        return {
            dataVisible : this.visible,
            loading:true,
            totalCount: 0,
            pageIndex: 1,
            publishList : []
        }
    },
    props:{
        visible:{
            type:Boolean,
            default:false
        }
    },
    mounted(){
        this.loading=true
        this.pageIndex=1
        this.getPublish()
    },
    methods:{
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getPublish()
        },
        getPublish(){
            this.$http({
                url: this.$http.adornUrl('/manage/article/list'),
                method: 'get',
                params: this.$http.adornParams({
                    'page': this.pageIndex,
                    'state':0,
                    'isDeleted':0
                })
            }).then(({ data }) => {
                if (data && data.code === 200) {
                    this.publishList = data.page.list
                    this.totalCount = data.page.totalCount
                    // this.pageIndex++;
                    this.loading=false
                    // for(var i = 0;i<publishList.length;i++){
                    // this.$http({
                    //     url: this.$http.adornUrl('/WxPub/getThumb'),
                    //     method: 'get',
                    //     params: this.$http.adornParams({
                    //         mediaId:data.page[i].thumbMediaId
                    //     })
                    // }).then(({ res }) => {
                    //     if (res && res.code === 200) {
                    //         console.log(res.page);
                    //         data.page[i].imgUrl = res.page
                    //     }})
                    // }
                    console.log(data.page);
                }})
        },
        getThumb(mediaId){
           
        },
        onClose(){
            this.$emit('onClose')
        },
        choose(publish){
            console.log("choose");
            this.$emit('selected', publish)
        }
    }
}
</script>